<template>
    <div class="courseDesignList">
      <mt-header title="查看课程设计安排">
        <router-link to="" slot="left">
          <mt-button icon="back" @click="backOne()">返回</mt-button>
        </router-link>
        <mt-button icon="more" slot="right"></mt-button>
      </mt-header>

      <!-- curretn list -->
      <mt-cell
        v-for=" (item , index) in currentList"
        :title="item.courseId"
        :label="item.time"
        is-link
        @click.native.prevent="checkDetails(index,currentList)"
      >
      </mt-cell>
      <hr>
      <mt-button type="primary" size="small" class="show-history-button" @click="getList()">显示历史课程设计</mt-button>
      <!-- history list -->
      <mt-cell
        v-for=" (item , index) in historyList"
        :title="item.courseNameCN"
        :label="item.time"
        is-link
        @click.native.prevent="checkDetails(index,historyList)"
      >
      </mt-cell>

    </div>
</template>
<style>
  .show-history-button{
      display:block;
      margin: 0 8px 10px 8px;
  }
</style>
<script>
    export default{
        name : 'courseDesignList',
        data(){
            return{
                currentList:[],
                historyList:[]
            }
        },
        components:{
        },
        mounted:function(){
            this.$nextTick(function(){
                this.initTwoList();
            })
        },
        methods:{
            //router back
            backOne:function(){
                this.$router.back();
            },
            //init list
            initTwoList:function(){
                // GET /someUrl
                this.$http.get('/static/dt.json').then(response => {
                    //get body current list
                    console.log(response.body.current);
                    for (const element of response.body.current){
                        //push to current list[]
                        this.currentList.push(element);
                    }
                }, response => {
                    // error callback
                    alert("no file page");
                });
            },
            //load the history
            initHistory:function(){
                // GET /someUrl
                //clear the list
                this.historyList = [];
                //push list
                this.$http.get('http://localhost:8080/TeachingMIS/courseDesign/getDesignBaseInfo?page=1&pageSize=10').then(response => {
                    // get history list
                    for (const element of response.body.info){
                        //push to tableData[]
                        this.historyList.push(element);
                    }
                }, response => {
                    // error callback
                    alert("no file page");
                });
            },
            getList:function(){
                this.initHistory();
            },

            //check the course details
            checkDetails:function(index,rows){
                this.$router.push({ name: 'CourseDesignDetails', params: { courseDesignID: rows[index].courseDesignID }})
            }

        }
    }
</script>
